<template>
  <div class="album-container">
    <HomeHeader />
    
    <!-- 相册标题和描述 -->
    <div class="album-header">
      <div class="title-wrapper">
        <div class="title-left">
          <img src="https://luokangyuan.com/themes/halo-theme-wik/source/images/travel.png" alt="travel" class="title-icon">
        </div>
        <div class="title-right">
          <h1>travel</h1>
        </div>
      </div>
      <p class="description animate-up">
        生活太匆碌，美景无心顾，来一场不一样的旅行吧。迎接你的或许是阳光温暖，清风徐徐，也不一定，感受才是灵魂的语言，文字只是表达感受的标点和符号
      </p>
    </div>

    <!-- 相册网格 -->
    <div class="album-grid">
      <!-- 回家 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/%E5%A4%A7%E6%89%8B%E6%8B%89%E5%B0%8F%E6%89%8B%E5%9B%9E%E5%AE%B62.jpg" alt="回家">
          <div class="photo-overlay">
            <h3>回家</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 妈妈和女孩 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/%E5%A6%88%E5%A6%88%E5%92%8C%E5%A5%B3%E5%AD%A9.jpg" alt="妈妈和女孩">
          <div class="photo-overlay">
            <h3>妈妈和女孩</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 慢慢走 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/%E7%87%95%E5%84%BF%E5%B2%9B%E5%B0%8F%E5%A7%90%E5%A7%903.jpg" alt="慢慢走">
          <div class="photo-overlay">
            <h3>慢慢走</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 背影 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/20190928-%E5%BC%A0%E4%B8%9C%E5%8D%87.jpg" alt="背影">
          <div class="photo-overlay">
            <h3>背影</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 看展 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/20191002-%E6%B9%96%E5%8C%97%E7%BE%8E%E6%9C%AF%E9%A6%86%E5%B0%8F%E5%A7%90%E5%A7%90.jpg" alt="看展">
          <div class="photo-overlay">
            <h3>看展</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 卧英泉 -->
      <div class="photo-card animate-scale">
        <div class="photo-wrapper">
          <img src="https://luokangyuan.com/upload/2022/06/%E6%B5%8E%E5%8D%97-%E8%B6%B5%E7%AA%81%E6%B3%89.jpg" alt="卧英泉">
          <div class="photo-overlay">
            <h3>卧英泉</h3>
          </div>
          <div class="photo-info">
            <div class="location">
              <el-icon><Location /></el-icon>
              <span>山东·青岛</span>
            </div>
            <div class="date">
              <el-icon><Calendar /></el-icon>
              <span>2022/06</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Location, Calendar } from '@element-plus/icons-vue'
import HomeHeader from '@/components/home-header.vue'
</script>

<style scoped lang="scss">
.album-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 60px 20px 20px;
}

.album-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
  
  .title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    
    .title-left {
      opacity: 0;
      transform: translateX(-100%);
      animation: slideFromLeft 1s ease forwards;
      
      .title-icon {
        width: 40px;
        height: 40px;
      }
    }
    
    .title-right {
      opacity: 0;
      transform: translateX(100%);
      animation: slideFromRight 1s ease forwards;
      
      h1 {
        font-size: 32px;
        color: #333;
        margin: 0;
      }
    }
  }
  
  .description {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease 0.5s forwards;
  }
}

.album-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.photo-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: scale(0.6);
  animation: scaleUp 0.6s ease forwards;
  
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
      animation-delay: #{$i * 0.1}s;
    }
  }
  
  &:hover {
    .photo-wrapper img {
      transform: scale(0.9);
    }
    
    .photo-overlay {
      opacity: 1;
    }
    
    .photo-info {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.photo-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  overflow: hidden;
  
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  
  h3 {
    color: #fff;
    font-size: 20px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

.photo-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease;
  
  .location, .date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 14px;
    
    .el-icon {
      font-size: 16px;
    }
  }
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .album-header {
    .title-wrapper {
      h1 {
        font-size: 24px;
      }
    }
    
    .description {
      font-size: 14px;
      padding: 0 20px;
    }
  }
  
  .album-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  
  .photo-info {
    padding: 10px;
    font-size: 12px;
    
    .el-icon {
      font-size: 14px;
    }
  }
}

/* 定义动画关键帧 */
@keyframes slideFromLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleUp {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
